<template>
	<div class="organizationLife_two_page">
		<mu-load-more  @load="load">
			<div class="note" :style ="note">
				<div class="inform">
					<span>组织生活</span>
					<div class="menu" @click="newSummary" v-if="is_edit==1"> 
						<img src="@as/img/zuzhi_wode_qifabu@2x.png" alt=""> 
						<span>发布</span>
					</div>
				</div>
				<div class="learnIndex">
					<ly-tab class="ly-tab" v-model="selectedId" :items="items" :options="options" @change="handleChange"></ly-tab>
				</div> 
			</div>
			<Loading  v-if="notMore"  class="empty-text-wrap" />
			<div class="list">
				<div class="ol">
					<div class="bar" v-for="(item,index) in correlationList" :key="index" @click="summaryDetails(item)">
						<!--<img src="@as/img/zuzhi_wode_hj@2x.png" alt="" class="j">-->
						<div class="he">
							<div class="txt">
								<div class="title">
									<p>{{item.theme}}</p>
								</div>
								<div class="bt">
									<p class="name">{{item.className}}</p>
									<p class="time">{{(item.create_time) | time}}</p>
								</div>
							</div>
							<div class="pic">
					            <img src="@as/img/dangwu_wode_zp@2x.png" alt="">
					         </div>
						</div>
					</div>
				</div>
				
				<!--<div class="loading" >{{loaded}}</div>-->
				<div class="loading" v-if="loadOver" :class="{'notPageOne':p>1}">{{loaded}}</div>
			</div>
			<div class="tab">
				<div class="lf" @click="organizationLife">
					<img src="@as/img/zuzhi_wode_hahui@2x.png" alt="">
					<span>我的会议</span>
				</div>
				<div class="fg"></div>
				<div class="rf">
					<img src="@as/img/zuzhi_wode_qianbired@2x.png" alt="">
					<span>会议纪要</span>
				</div>
			</div>
		</mu-load-more>
	</div>
</template>

<script>
	import LyTab from "@cp/index";
    import Loading from '@/components/emptyText.vue';
	export default {
			components: {
					LyTab,
                	Loading
			},
			data() {
				return {
					loaded:'加載更多...',
					notMore:false,
                    loadOver:false,
					loading:false,
					p:1,
					page:7,
					org_type: 1,
					is_edit:'',
					selectedId: 0,
					bottomSelectedId: 0,
					items: [
						{ label: "与我相关", org_type: "1" },
						{ label: "我发布的", org_type: "2" }
					],
					options: {
						activeColor: "#333",
        				color: "#999"
					},

					tab:0,
					correlationList:[],//与我相关
					publishList:[],//我发布的
					note: {
						backgroundImage: "url(" + require("@as/img/zuzhi_wode_shenghuo@2x.png") + ")",
						backgroundRepeat: "no-repeat",
						backgroundSize: "100% 100%",
					},
					bj: {
						backgroundImage: "url(" + require("@as/img/zuzhi_wode_rq@2x.png") + ")",
						backgroundRepeat: "no-repeat",
						backgroundSize: "100% ",
					},
				}
			},
			mounted() {
				this.$progress.done();
				this.tabChange();
			},
			methods: {
				organizationLife(){
					this.$router.push('../organization/organizationLife') 
				},
				// 会议纪要详情
				summaryDetails (item) {
					this.$router.push({ path: '../organization/summaryDetails' , query: item })
				},
				//新建会议纪要
				newSummary(){
					this.$router.push('../organization/newSummary') 
				},
				async tabChange (p,e) {
					let that = this;
					try {
						let params = {
							p: that.p,
							page: that.page,
							uid: JSON.parse(Cookies.get('user_71ydj')).id,
							type:that.org_type,
						}
						const url = `/app/meeting/minutes`
						let res = await that.$http.get(url, params)

						if (res.code === 200) {
                            if(res.data.length){
                                this.correlationList.push(...res.data);
                            }
                            this.loadOver =false;
                            if(this.p!=1){
                                console.log(this.p);
                                console.log(res.data);
                                if(res.data.length){
                                }else{
                                    this.loadOver =true;
                                    this.loading =false;
                                    this.loaded='没有更多数据了'
                                    return false
                                }
                            }else {
                                if(!res.data.length){
                                    this.notMore =true;
                                    this.loadOver =false;
                                }else{
                                    if(res.data.length<7&&res.data.length!=0){
                                        this.loadOver =true;
                                        this.notMore =false;
                                        this.loaded='没有更多数据了';
                                    }
                                }
                            }
							// that.correlationList = res.data;
							// if (that.correlationList instanceof Array == false) {
							// 	that.loaded = "没有更多";
							// 	that.notMore = false;
							// 	return;
							// }
							// if (res.data.length < 10) {
							// 	that.loaded = "没有更多了";
							// 	that.notMore = false;
							// 	return;
							// }
						}
					} catch (e) {
						console.log('​catch -> e', e)
					}
				},
				load() {
                    if (!this.loadOver) {
                        this.loading = true;
                        clearTimeout(this.method);
                        this.method = setTimeout(() => {
                            this.p = this.p + 1;
                            this.tabChange(this.p,this.org_type);
                            this.loading = false;
                        }, 2000);
                    }
					// this.loading = true;
					// if (this.notMore) {
					// 	clearTimeout(this.method);
					// 	this.method = setTimeout(() => {
					// 		this.p = this.p + 1;
					// 		this.tabChange();
					// 	}, 500);
					// }
				},
				handleChange(item, index) {
					let that = this;
					that.org_type = item.org_type;
					that.correlationList=[];
					that.tabChange();
					that.p = 1;
					that.loading =false;
					that.loaded = "加载更多...";
					that.notMore = false;
				}
			},
			created(){
				// 从缓存中取出is_edit
				this.is_edit = localStorage.getItem('LC_id');
			}
	}
</script>

<style scoped>
	.organizationLife_two_page .mu-load-more{
		min-height:100vh;
		overflow: auto !important;
		padding: 0 0 15px 0!important;
	}
</style>


<style scoped lang="scss">
	/deep/.ly-tab-active-bar {
    background:-webkit-linear-gradient(left,#eb4e44,#f47447);
		background:-o-linear-gradient(right,#eb4e44,#f47447);
		background:-moz-linear-gradient(right,#eb4e44,#f47447);
		background:linear-gradient(to right,#eb4e44,#f47447);
		border-radius: 10px;
  }
  .note{
		padding: 38px 15px 15px 15px;
		box-sizing: border-box;
		width:100%;
		// height:234.5px;
		position: relative;
	}
	.inform{
		width:100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 25px;
		span{
			font-size: 28px;
			color:#000;
			font-weight: bold;
		}
		.menu{
			width:55px;
			height:22.5px;
			background: #666;
			border-radius: 50px;
			display: flex;
			align-items: center;
			justify-content: center;
			img{
				width:13.5px;
				height:12.5px;
			}
			span{
				font-size: 10px;
				color: #FFF;
				margin-left: 1px;
				font-weight: normal;
			}
		}
	}
	.learnIndex{
		display: flex;
		justify-content: flex-start;
		width:auto;
		margin-left: -15px;
		element.style{
			background-color:red !important;
		}
	}
	.list{
		width:100%;
		padding: 0 15px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: absolute;
		left: 0;
		top:165px;
		z-index: 999;
		overflow: hidden;
		.ol{
			width:100%;

			.bar{
				width:100%;
				height:70px;
				/*box-shadow: 0px 6px 15px 2px #f1f1f1;*/
				background:rgba(255,255,255,1);
				box-shadow:0px 8px 20px 0px rgba(0, 0, 0, 0.08);
				border-radius:4px;
				padding: 5px 10px 0 42px;
				box-sizing: border-box;
				position: relative;
				margin-bottom: 15px;
				background: #fff;
				display: flex;
				/*justify-content: flex-end;*/
				/*align-items: center;*/
				position: relative;
				&:after{
					position: absolute;
					content: '';
					left: 0;
					top: 10px;
					width:4px;
					height:27px;
					background:rgba(235,77,68,1);
					border-radius:0px 4px 4px 0px;
				}
				.j{
					width:4.5px;
					height:29px;
					position: absolute;
					left: 0;
					top:10px;
				}
				.he{
					width:95%;
					/*height:44px;*/
					display: flex;
					justify-content: space-between;
					align-items: center;
					.txt{
						width:90%;
						height:100%;
						display: flex;
						flex-direction: column;
						.title{
							width:100%;
							overflow: hidden;
							text-overflow:ellipsis;
							white-space: nowrap;
							line-height: 1;
							p{
								color: #333;
								font-size: 14px;
								display: inline-block;
								line-height: 2;
								margin: 0;
								padding: 0;
								overflow: hidden;
								text-overflow:ellipsis;
								white-space: nowrap;
							}
						}
						.bt{
							width:100%;
							display: flex;
							justify-content: space-between;
							align-items: center;
							/*padding-top: 2px;*/
							.name{
								font-size: 12px;
								color: #ec5345;
								margin: 0;
								padding: 0;
							}
							.time{
								color:#999;
								font-size: 12px;
								margin: 0;
								padding: 0;
							}
						}
					}
					.pic{
						width:5%;
						height:100%;
						margin-left: 5%;
						display: flex;
						align-items: center;
						justify-content: flex-end;
						img{
							width:8px;
							height:13.5px;
						}
					}
				}
			}
		}
		.loading {
			width: 100%;
			font-size: 14px;
			color: #dddddd;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 12px;
			&.notPageOne{
				margin-top: -40px;
			}
		}
	}
	.tab{
		width:100%;
			padding: 15px 15px;
			box-sizing: border-box;
			margin-top:135px;
			position: fixed;
			left:0;
			bottom: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			z-index: 100;
			background: #FFF;
		.lf{
			width:40%;
			display: flex;
			justify-content: center;
			align-items: center;
			img{
				width:15px;
				height:15px;
			}
			span{
				font-size: 16px;
				color: #999;
				margin-left: 3px;
			}
		}
		.fg{
			width:1px;
			height:20px;
			background: #ccc;
		}
		.rf{
			width:40%;
			display: flex;
			justify-content: center;
			align-items: center;
			img{
				width:15px;
				height:15px;
			}
			span{
				font-size: 16px;
				color: #eb4d44;
				margin-left: 3px;
			}
		}
	}
	
</style>
<style scoped lang="scss">
div  .mu-tabs{
  position: relative;
  z-index: 97;
  height: 40px;
  margin-bottom: 15px;
	background: none!important;
	margin-top: 40px;
}
div   .mu-tab-link-highlight {
  width:16px !important;
  height:4px !important;
  background:rgba(244,117,72,1);
  border-radius:2px;
  margin-left: 28px;
}
div  .mu-tab{
  font-size:14px;
  font-family:PingFang-SC-Medium;
  font-weight:500;
  color:#333;
}
div  .mu-tab-active{
  font-size:18px;
  font-family:PingFang-SC-Medium;
  font-weight:bold;
  color:#333;
}
.organizationLife_two_page  .empty-text-wrap{
	width: 100%;
	height: 40vh;
	margin-top: 100px;
}
</style>
